﻿<template>
	<div class="card-fill layout-padding" v-loading="loading" element-loading-text="Loading...">
		<!-- 搜索区域 - 头部 -->
		<WtmSearcher
			v-model="searchDataFrameworkUser"
			@search="
				() => {
					getTableDataFrameworkUser();
				}
			"
			:showToggleAdvanced="false"
		>
			<!-- 基础搜索条件 -->
			<template #default>
				<el-row :gutter="15">
					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15">
						<el-form-item ref="ITCode_FormItem" prop="ITCode" :label="$t('message.autotrans._Model_FrameworkUser_ITCode')">
							<el-input v-model="searchDataFrameworkUser.ITCode" clearable placeholder="请输入账号"></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15">
						<el-form-item ref="Name_FormItem" prop="Name" :label="$t('message.autotrans._Model_FrameworkUser_Name')">
							<el-input v-model="searchDataFrameworkUser.Name" clearable placeholder="请输入姓名"></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15">
						<el-form-item ref="IsValid_FormItem" prop="IsValid" :label="$t('message.autotrans._Model_FrameworkUser_IsValid')">
							<el-select v-model="searchDataFrameworkUser.IsValid" clearable placeholder="选择状态">
								<el-option :key="1" :value="true" :label="$t('message._system.common.vm.tips_bool_true')"></el-option>
								<el-option :key="0" :value="false" :label="$t('message._system.common.vm.tips_bool_false')"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
			</template>
		</WtmSearcher>

		<div style="text-align: right">
			<WtmButton
				v-auth="'/api/_Admin/FrameworkUser/Create'"
				icon="fa fa-plus"
				type="primary"
				:button-text="$t('message.autotrans.SysCreate')"
				@click="OnCreateClick()"
			/>
			<WtmButton
				v-auth="'/api/_Admin/FrameworkUser/Import'"
				icon="fa fa-tasks"
				type="primary"
				:button-text="$t('message.autotrans.SysImport')"
				@click="OnImportClick()"
			/>
			<WtmButton
				v-auth="'/api/_Admin/FrameworkUser/BatchDelete'"
				icon="fa fa-trash"
				type="danger"
				:button-text="$t('message.autotrans.SysDelete')"
				:confirm="$t('message._system.common.vm.deletetip')"
				@click="onBatchDelete()"
			/>
			<WtmButton
				v-auth="'/api/_Admin/FrameworkUser/BatchEdit'"
				icon="fa fa-pencil-square"
				type="primary"
				:button-text="$t('message.autotrans.SysBatchEdit')"
				@click="OnBatchEditClick()"
			/>
			<WtmButton
				v-auth="'/api/_Admin/FrameworkUser/FrameworkUserExportExcel'"
				icon="fa fa-arrow-circle-down"
				type="primary"
				:button-text="$t('message.autotrans.SysExport')"
				@click="onExport()"
			/>
		</div>
		<div class="main-content-layout">
			<div class="left-panel">
				<WtmDeptTree ref="deptTreeRef" title="筛选部门" @node-click="handleDeptNodeClick" />
			</div>
			<div class="right-panel">
				<WtmTable ref="tableRefFrameworkUser" v-bind="tableDataFrameworkUser" class="table-operation-area">
					<template #operation>
						<el-table-column :label="$t('message._system.common.vm.operate')" width="240" text-align="center">
							<template v-slot="scope">
								<WtmButton
									v-auth="'/api/_Admin/FrameworkUser/Edit'"
									:is-text="true"
									icon="fa fa-pencil-square"
									type="warning"
									:button-text="$t('message.autotrans.SysEdit')"
									@click="OnEditrowClick(scope.row)"
								/>
								<WtmButton
									v-auth="'/api/_Admin/FrameworkUser/{id}'"
									:is-text="true"
									icon="fa fa-info-circle"
									type="info"
									:button-text="$t('message.autotrans.Page详情')"
									@click="OnDetailsrowClick(scope.row)"
								/>
								<WtmButton
									v-auth="'/api/_Admin/FrameworkUser/BatchDelete'"
									icon="fa fa-trash"
									type="danger"
									:button-text="$t('message.autotrans.SysDelete')"
									:confirm="$t('message._system.common.vm.deletetip')"
									:is-text="true"
									@click="onDelete(scope.row)"
								/>
								<WtmButton
									v-auth="'/api/_Admin/FrameworkUser/Edit'"
									:is-text="true"
									icon="fa fa-unlock-alt"
									type="warning"
									:button-text="$t('message.autotrans.LoginChangePassword')"
									@click="OnPasswordrowClick(scope.row)"
								/>
							</template>
						</el-table-column>
					</template>
				</WtmTable>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts" name="用户管理;true;HengTong.Areas._Admin.Controllers;FrameworkUser">
import { ElMessage } from 'element-plus';
import { defineAsyncComponent, ref, getCurrentInstance, onMounted, reactive } from 'vue';
import { frameworkuserApi } from '/@/api/_admin/frameworkuser';
import other from '/@/utils/other';

const ci = getCurrentInstance() as any;

const CreateDialog = defineAsyncComponent(() => import('./create.vue'));
const EditDialog = defineAsyncComponent(() => import('./edit.vue'));
const DetailsDialog = defineAsyncComponent(() => import('./details.vue'));
const ImportDialog = defineAsyncComponent(() => import('./import.vue'));
const BatchEditDialog = defineAsyncComponent(() => import('./batchedit.vue'));
const PasswordDialog = defineAsyncComponent(() => import('./password.vue'));

const loading = ref(false);
const searchDataFrameworkUser = ref({
	ITCode: '',
	Name: '',
	IsValid: undefined,
	GroupId: '',
});
const stateData = reactive({
	AllSysGroups: [] as any[],
});
// 定义变量内容
const tableRefFrameworkUser = ref();
const tableDataFrameworkUser = ref({
	// 列表数据（必传）
	data: [],
	// 表头内容（必传，注意格式）
	header: [
		{ title: ci.proxy.$t('message.autotrans.SysAccount'), key: 'FrameworkUserItCode', type: 'text', isCheck: true },
		{ title: ci.proxy.$t('message.autotrans._AdminName'), key: 'FrameworkUserName', type: 'text', isCheck: true },
		{
			title: ci.proxy.$t('message.autotrans._AdminCellPhone'),
			key: 'FrameworkUserCellPhone',
			type: 'text',
			isCheck: true,
		},
		{ title: ci.proxy.$t('message.autotrans._AdminRole'), key: 'FrameworkUserRole', type: 'text', isCheck: true },
		{ title: ci.proxy.$t('message.autotrans._AdminGroup'), key: 'FrameworkUserGroup', type: 'text', isCheck: true },
		{
			title: ci.proxy.$t('message.autotrans._AdminIsValid'),
			key: 'FrameworkUserIsValid',
			type: 'switch',
			isCheck: true,
		},
		{
			title: ci.proxy.$t('message.autotrans._AdminPhoto'),
			key: 'FrameworkUser_Photo',
			type: 'image',
			imageWidth: '70',
			imageHeight: '40',
			isCheck: true,
		},
	],
	// 配置项（必传）
	config: {
		total: 0, // 列表总数
		loading: true, // loading 加载
		isSerialNo: true, // 是否显示表格序号
		isSelection: true, // 是否显示表格多选
		isOperate: true, // 是否显示表格操作栏
	},
});
// 初始化表格数据
const getTableDataFrameworkUser = () => {
	loading.value = true;
	tableRefFrameworkUser.value
		.doSearch(frameworkuserApi().search, searchDataFrameworkUser.value)
		.catch((error: any) => {
			other.setFormError(ci, error);
		})
		.finally(() => {
			loading.value = false;
		});
};
const OnCreateClick = () => {
	other.openDialog(ci.proxy.$t('message.autotrans.SysCreate'), CreateDialog, null, getTableDataFrameworkUser);
};

const OnEditrowClick = (row: any) => {
	other.openDialog(ci.proxy.$t('message.autotrans.SysEdit'), EditDialog, row, getTableDataFrameworkUser);
};

const OnDetailsrowClick = (row: any) => {
	other.openDialog(ci.proxy.$t('message.autotrans.Page详情'), DetailsDialog, row, getTableDataFrameworkUser);
};

const OnImportClick = () => {
	other.openDialog(ci.proxy.$t('message.autotrans.SysImport'), ImportDialog, null, getTableDataFrameworkUser);
};

// 删除
const onDelete = (row: any) => {
	frameworkuserApi()
		.delete([row.ID])
		.then(() => {
			getTableDataFrameworkUser();
		});
};

const onBatchDelete = () => {
	const selectedrows = tableRefFrameworkUser.value.getSelectedRows();
	const selectedids = selectedrows.map((x: any) => x.ID);
	if (selectedids.length > 0)
		frameworkuserApi()
			.delete(selectedids)
			.then(() => {
				getTableDataFrameworkUser();
			});
	else ElMessage.error(ci.proxy.$t('message._system.common.vm.check'));
};

const OnBatchEditClick = () => {
	const selectedrows = tableRefFrameworkUser.value.getSelectedRows();
	const selectedids = selectedrows.map((x: any) => x.ID);
	if (selectedids.length > 0)
		other.openDialog(ci.proxy.$t('message.autotrans.SysBatchEdit'), BatchEditDialog, selectedids, getTableDataFrameworkUser);
	else ElMessage.error(ci.proxy.$t('message._system.common.vm.check'));
};

const onExport = () => {
	const selected = tableRefFrameworkUser.value.getSelectedRows();
	if (selected.length > 0) {
		frameworkuserApi().exportById(selected.map((x: any) => x.ID));
	} else {
		frameworkuserApi().export({});
	}
};

const OnPasswordrowClick = (row: any) => {
	other.openDialog(ci.proxy.$t('message.autotrans.LoginChangePassword'), PasswordDialog, row, getTableDataFrameworkUser);
};
// 处理部门树节点点击
const handleDeptNodeClick = (node: any) => {
	// 如果点击的是根节点或者Value为空，则清空部门筛选
	if (!node.Value || node.Value === 'all') {
		searchDataFrameworkUser.value.GroupId = '';
	} else {
		searchDataFrameworkUser.value.GroupId = node.Value;
	}
	getTableDataFrameworkUser();
};
// 页面加载时
onMounted(() => {
	loading.value = true;

	const promises: Promise<any>[] = [];
	Promise.allSettled(promises).finally(() => {
		getTableDataFrameworkUser();
		loading.value = false;
	});
});

// 暴露变量
defineExpose({});
</script>

<style scoped>
.card-fill {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.main-content-layout {
	display: flex;
	gap: 15px;
	flex: 1;
	min-height: 0;
}

.left-panel {
	width: 280px;
	flex-shrink: 0;
}

.right-panel {
	flex: 1;
	min-width: 0;
}

.table-operation-area {
	height: 100%;
}

/* 响应式设计 */
@media (max-width: 768px) {
	.main-content-layout {
		flex-direction: column;
	}

	.left-panel {
		width: 100%;
		height: 300px;
		flex-shrink: 0;
	}

	.right-panel {
		flex: 1;
		min-height: 400px;
	}
}
</style>
